<template>
  <div class="ApplyFertilizer">
    <h2>常规试验施肥量计算工具</h2>
    <div class="calculateBox">
      <div class="sideBox">
        <div class="side_left">
          <h3>设计施肥水平</h3>
          <div class="gridBox">
            <el-row :gutter="20">
              <el-col
                :span="8"
                v-for="(item, index) in elementData"
                :key="index"
              >
                <div class="grid-content">
                  <div class="grid-list">
                    <p v-text="item.name"></p>
                    <el-input v-model="item.value" @input="change($event)">
                      <template #append>Kg/Hm2</template>
                    </el-input>
                  </div>

                  <div class="grid-list">
                    <p>基肥追肥比</p>
                    <div class="inlineBox">
                      <el-input
                        v-model="item.fertilizer"
                        @input="changeScale($event, index)"
                      >
                        <template #append>%</template>
                      </el-input>
                      <el-input v-model="item.topdressing" disabled>
                        <template #append>%</template>
                      </el-input>
                    </div>
                  </div>

                  <div class="grid-list">
                    <p>肥料类型</p>
                    <el-select
                      v-model="item.fertilizerType"
                      @change="changeOpt($event, index)"
                    >
                      <el-option
                        v-for="item_opt in fertilizerType_opt[index].opt"
                        :key="item_opt.value"
                        :label="item_opt.label"
                        :value="item_opt.value"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div class="grid-list">
                    <p>有效成分</p>
                    <div class="grid-list-input">
                      <el-input v-model="item.scale.nitrogen">
                        <template #prepend>氮</template>
                        <template #append>%</template>
                      </el-input>
                      <el-input v-model="item.scale.phosphorus">
                        <template #prepend>磷</template>
                        <template #append>%</template>
                      </el-input>
                      <el-input v-model="item.scale.kalium">
                        <template #prepend>钾</template>
                        <template #append>%</template>
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="side_right">
          <h3>小区施肥量</h3>
          <div class="gridBox">
            <div class="grid-list">
              <p>小区面积</p>
              <el-input v-model="area" @input="change($event)">
                <template #append>m2</template>
              </el-input>
            </div>

            <div class="grid-list">
              <p>基肥施用量</p>
              <el-row :gutter="20">
                <el-col
                  :span="8"
                  v-for="(item, index) in BaseFertilizerRate"
                  :key="index"
                >
                  <p v-text="item.name"></p>
                  <el-input v-model="item.value" disabled> </el-input>
                </el-col>
              </el-row>
            </div>

            <div class="grid-list">
              <p>追肥施用量</p>
              <el-row :gutter="20">
                <el-col
                  :span="8"
                  v-for="(item, index) in TopdressingRate"
                  :key="index"
                >
                  <p v-text="item.name"></p>
                  <el-input v-model="item.value" disabled> </el-input>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>

      <div class="btn_bot">
        <el-button class="btnStyle" type="primary" @click="count"
          >计算</el-button
        >
        <el-button class="btnStyle" type="success" @click="refresh"
          >刷新</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
  name: 'ApplyFertilizer',
  setup() {
    let storage = window.sessionStorage
    storage.removeItem('elementData_old')
    const elementData_old = [
      {
        name: '纯氮',
        value: 0,
        fertilizer: 100,
        topdressing: 0,
        fertilizerType: 0,
        scale: {
          nitrogen: 46, // 氮 x1
          phosphorus: 0, // 磷 y1
          kalium: 0, // 钾 z1
        },
      },
      {
        name: 'P2O5',
        value: 0,
        fertilizer: 100,
        topdressing: 0,
        fertilizerType: 0,
        scale: {
          nitrogen: 0, // 氮
          phosphorus: 0, // 磷
          kalium: 0, // 钾
        },
      },
      {
        name: 'K2O',
        value: 0,
        fertilizer: 100,
        topdressing: 0,
        fertilizerType: 0,
        scale: {
          nitrogen: 0, // 氮
          phosphorus: 0, // 磷
          kalium: 0, // 钾
        },
      },
    ]

    // todo 缓存原始数据处理
    storage.setItem('elementData_old', JSON.stringify(elementData_old))
    let elementData = reactive(elementData_old)

    // todo 下拉数据
    const fertilizerType_opt = reactive([
      {
        opt: [
          {
            label: '尿素',
            value: 0,
            scale: {
              nitrogen: 46, // 氮
              phosphorus: 0, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '氯化铵',
            value: 1,
            scale: {
              nitrogen: 25, // 氮
              phosphorus: 0, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '碳酸氢氨',
            value: 2,
            scale: {
              nitrogen: 30, // 氮
              phosphorus: 0, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '硝酸铵',
            value: 3,
            scale: {
              nitrogen: 45, // 氮
              phosphorus: 0, // 磷
              kalium: 0, // 钾
            },
          },
        ],
      },
      {
        opt: [
          {
            label: '请选择肥料种类',
            value: 0,
            scale: {
              nitrogen: 0, // 氮
              phosphorus: 0, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '磷酸二胺',
            value: 1,
            scale: {
              nitrogen: 16, // 氮
              phosphorus: 46, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '钙镁磷肥',
            value: 2,
            scale: {
              nitrogen: 0, // 氮
              phosphorus: 12, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '过磷酸钙',
            value: 3,
            scale: {
              nitrogen: 0, // 氮
              phosphorus: 15, // 磷
              kalium: 0, // 钾
            },
          },
        ],
      },
      {
        opt: [
          {
            label: '请选择肥料种类',
            value: 0,
            scale: {
              nitrogen: 0, // 氮
              phosphorus: 0, // 磷
              kalium: 0, // 钾
            },
          },
          {
            label: '硝酸钾',
            value: 1,
            scale: {
              nitrogen: 13.5, // 氮
              phosphorus: 0, // 磷
              kalium: 46, // 钾
            },
          },
          {
            label: '磷酸二氢钾',
            value: 2,
            scale: {
              nitrogen: 0, // 氮
              phosphorus: 52, // 磷
              kalium: 34, // 钾
            },
          },
        ],
      },
    ])

    // todo 面积
    let area = ref(0)

    // todo 基肥施肥量(kg)
    const BaseFertilizerRate = reactive([
      {
        name: '氮肥基施',
        value: 0,
      },
      {
        name: '磷肥基施',
        value: 0,
      },
      {
        name: '钾肥基施',
        value: 0,
      },
    ])

    // todo 追肥施用量(kg)
    const TopdressingRate = reactive([
      {
        name: '氮肥追施',
        value: 0,
      },
      {
        name: '磷肥追施',
        value: 0,
      },
      {
        name: '钾肥追施',
        value: 0,
      },
    ])

    const change = function (e) {
      // console.log(e)
    }

    // 下拉改变的数据
    const changeOpt = function (e, index) {
      elementData[index].scale = fertilizerType_opt[index].opt[e].scale
    }

    // 改变比例 m n值
    const changeScale = function (e, index) {
      // console.log(e, index)
      if (e > 100) {
        ElMessage.error('值不能大于100')
        elementData[index].fertilizer = 0
      }
      elementData[index].topdressing = 100 - elementData[index].fertilizer
    }

    // 计算
    const count = function () {
      // 求和 x1+x2+x3
      let cout_N = 0
      let cout_P = 0
      let cout_K = 0

      for (let i = 0; i < elementData.length; i++) {
        cout_N += elementData[i].scale.nitrogen
        cout_P += elementData[i].scale.phosphorus
        cout_K += elementData[i].scale.kalium
      }

      // v1
      BaseFertilizerRate[0].value =((elementData[0].value - 
      (elementData[1].value / 
      elementData[1].scale.phosphorus * 
      elementData[1].scale.nitrogen)) /
      elementData[0].scale.nitrogen *
      100 *
      (area.value / 10000) *
       elementData[0].fertilizer /
       100
      ).toFixed(4) 
      // ((elementData[0].value - 
      // (elementData[1].value / elementData[1].scale.phosphorus * elementData[1].scale.nitrogen * elementData[1].fertilizer * 0.01 ) - 
      // (elementData[2].value / elementData[2].scale.kalium * elementData[2].scale.nitrogen * elementData[2].fertilizer * 0.01)) *
      // elementData[0].fertilizer * 0.01 /
      // (0.01 * elementData[0].scale.nitrogen) *
      // (area.value * 0.0001)).toFixed(4)
      // ((elementData[0].value * elementData[0].fertilizer /
      //  100 - 
      // (elementData[1].value  / 
      // elementData[1].scale.phosphorus * 
      // elementData[1].scale.nitrogen)) /
      // elementData[0].scale.nitrogen *
      // 100 *
      // (area.value / 10000) 
      // ).toFixed(4)
      // (


      // v2
      TopdressingRate[0].value = ((elementData[0].value - 
      (elementData[1].value / 
      elementData[1].scale.phosphorus * 
      elementData[1].scale.nitrogen)) /
      elementData[0].scale.nitrogen *
      100 *
      (area.value / 10000) *
       elementData[0].topdressing /
       100
      ).toFixed(4)
      // (
      //   ((elementData[0].value / cout_N) *
      //     100 *
      //     (area.value / 10000) *
      //     (elementData[0].scale.nitrogen / cout_N) *
      //     elementData[0].topdressing) /
      //   100
      // ).toFixed(4)

      // v3
      BaseFertilizerRate[1].value = (
        ((elementData[1].value / cout_P) *
          100 *
          (area.value / 10000) *
          (elementData[1].scale.phosphorus / cout_P) *
          elementData[1].fertilizer) /
        100
      ).toFixed(4)

      // v4
      TopdressingRate[1].value = (
        ((elementData[1].value / cout_P) *
          100 *
          (area.value / 10000) *
          (elementData[1].scale.phosphorus / cout_P) *
          elementData[1].topdressing) /
        100
      ).toFixed(4)

      // v5
      BaseFertilizerRate[2].value = (
        ((elementData[2].value / cout_K) *
          100 *
          (area.value / 10000) *
          (elementData[2].scale.kalium / cout_K) *
          elementData[2].fertilizer) /
        100
      ).toFixed(4)

      // v6
      TopdressingRate[2].value = (
        ((elementData[2].value / cout_K) *
          100 *
          (area.value / 10000) *
          (elementData[2].scale.kalium / cout_K) *
          elementData[2].topdressing) /
        100
      ).toFixed(4)
    }

    // 刷新
    const refresh = function () {
      ElMessageBox({
        title: '提示！',
        message: '确定要重置所有数据吗?',
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
      })
        .then(() => {
          let getStorage = JSON.parse(storage.getItem('elementData_old'))
          // console.log(getStorage)
          for (let i = 0; i < getStorage.length; i++) {
            elementData[i] = reactive(getStorage[i])
          }
          done()
        })
        .catch(() => {
          // catch error
        })
    }

    return {
      elementData,
      fertilizerType_opt,
      BaseFertilizerRate,
      TopdressingRate,
      area,
      change,
      changeOpt,
      changeScale,
      count,
      refresh,
    }
  },

  methods: {},
})
</script>

<style lang="css" scoped>
@import 'index.css';
</style>
